<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="lib/layui/layui.js"></script>
    <script src="lib/jquery-1.12.4.js"></script>
</head>
<body>
<div style="margin-top: 20px">
    <form class="layui-form" lay-filter="multi">
        <div class="layui-form-item" id="content">
            <div class="layui-inline" style="margin-bottom: 10px">
                <label class="layui-form-label"><span style="color: red">*</span>基本单位：</label>
                <div class="layui-input-inline">
                    <input type="text" name="m_module" id="basic" lay-verify="m_spec"
                           placeholder="请输入基本规格名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="add" onclick="addUnit()"><i
                        class="layui-icon"></i>增加单位
                </button>
            </div>
            <div class="layui-inline">
                <i class="layui-icon layui-icon-about"
                   style="font-size: 30px; color: #1E9FFF;margin-left: 10px" id="tip"></i>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline"
                 style="margin-top: 20px;display: flex;justify-content: center;align-items: center">
                <button type="button" lay-submit="" lay-filter="saveMulti" onclick="Multi()"
                        class="layui-btn layui-btn-normal">
                    保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
            </div>
        </div>
    </form>
</div>

</body>
<script>
    var id = decodeURI(window.location.href).split("?id=")[1];
    var html = $("#content");
    var char = "<div class=\"layui-form-item\">\n" +
        "                    <div class=\"layui-inline\">\n" +
        "                        <label class=\"layui-form-label \"></label>\n" +
        "                        <div class=\"layui-input-inline\">\n" +
        "                            <input type=\"text\" lay-verify=\"parent\" placeholder=\"\" autocomplete=\"off\" class=\"layui-input unit\">\n" +
        "                        </div>\n" +
        "                    </div>\n" +
        "                    <div class=\"layui-inline\">\n" +
        "                      &nbsp;=&nbsp;\n" +
        "                    </div>\n" +
        "                    <div class=\"layui-inline\">\n" +
        "                        <div class=\"layui-input-inline\" style=\"width: 100px;\">\n" +
        "                            <input type=\"text\" lay-verify=\"fu\" autocomplete=\"off\" class=\"layui-input base\">\n" +
        "                        </div>\n" +
        "                    </div>\n" +
        "                    <div class=\"layui-inline\" style='width: 15px'>\n" +
        "                        <span class='index'></span>\n" +
        "                    </div>\n" +
        "                    <div class=\"layui-inline\">\n" +
        "                        <button type=\"button\" class=\"layui-btn layui-btn-primary layui-btn-sm\" onclick='fan(this)'><i class=\"layui-icon\"></i></button>\n" +
        "                    </div>\n" +
        "                </div>";

    layui.use(['form', 'element', 'jquery', 'layer','table'], function () {
        var form = layui.form, element = layui.element;
        var $ = layui.jquery, layer = layui.layer, table = layui.table;

        function show(){
            var number = $(".layui-form-item .layui-inline").find("label:first");
            $.ajax({
                url : 'xp/spec/getOne',
                data: {"id": id},
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    var result = data.obj.specificationName;
                    var time = (result.split("-").length-1)/2;

                    var s = result.slice(result.indexOf("：")+1,result.indexOf("(1"));
                    var ss = s.split("-");
                    //console.log(ss);
                    var basic = ss[0];
                    var d = result.slice(result.indexOf("(1-")+1,result.indexOf(")"));
                    var dd = d.split("-");
                    for(var i=0;i<time;i++){
                        html.append(char);
                        $(".unit").eq(i).val(ss[i+1]);
                        $(".base").eq(i).val(dd[i+1]);
                    }
                    order();
                    $("#basic").val(basic);
                    $(".index").html(basic);
                }
            });
        }
        show();
        form.verify({
            m_spec: function (value) {
                if (!value) {
                    return '请输入规格'
                }
                var number = $(".layui-form-item .layui-inline").find(".layui-input-inline:first").length;
                if(number<3){
                    return '新增失败，单位级数须大于1'
                }
            },
            parent: function (value) {
                if (!value) {
                    return '父级单位不能为空,换算率应为数字且大于0!'
                }
            },
            fu: function (value) {
                var reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if (!value) {
                    return '副单位不能为空，换算率应为数字且大于0!'
                } else if (!(reg.test(value))) {
                    return '换算率应为数字且大于0！'
                }
            }
        });

        var tips = "基本单位应为最小度量单位";
        var tip_index = 0;
        jQuery(document).on('mouseenter', '#tip', function () {
            tip_index = layer.tips(tips, '#tip', {time: 0, tips: [3, '#3595CC'], area: ['180px', '40px']});
        }).on('mouseleave', '#tip', function () {
            layer.close(tip_index);
        });
    });

    function cancel() {
        $('#save').attr('disabled', 'disabled');
        parent.layer.closeAll();
    }
    function fan(obj) {
        obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
        order();
    }
    //多级单位同步
    function syn(){
        var value = $("#basic").val();
        $(".index").html(value);
    }
    //多级输入框排序
    function order() {
        var number = $(".layui-form-item .layui-inline").find("label:first");
        for (var j = 1; j < number.length; j++) {
            number.eq(j).text(j + "级父单位：");
        }
    }

    $("#basic").blur(function () {
        var value = $("#basic").val();
        $(".index").html(value);
    });
    function addUnit() {
        html.append(char);
        var value = $("#basic").val();
        $(".index").html(value);
        order();
    }
    function Multi() {
        var basic = $("#basic").val();
        var parentName = [];
        var parentBase = [];
        var base = $(".base");
        var unit = $('.unit');
        var result = $(".unit:last").val();
        for(var i=0;i<unit.length;i++){
            parentName.push(unit.eq(i).val());
            parentBase.push(base.eq(i).val());
        }
        var result2 = '';
        for(var j=0;j<unit.length;j++){
            if(j==unit.length-1){
                result2 = result2+parentName[j];
            }else{
                result2= result2+parentName[j] +'-';
            }
        }
        var result3 = '';
        for(var k=0;k<base.length;k++){
            if(k==base.length-1){
                result3 = result3+parentBase[k];
            }else{
                result3 = result3+parentBase[k]+ '-';
            }

        }
        result3 = result3 + ')';
        result = result +'：'+ basic+'-'+result2 + '(1-'+result3;
        var msg = '';
        $.ajax({
            url : ' xp/spec/verify',
            data: {'name':result},
            type: 'post',
            async: false,
            dataType: 'json',
            success: function (data) {
                if(data.obj==null){
                    msg = ''
                }else{
                    msg = '该规格已存在';
                    layer.msg(msg,{icon:5});
                }
                return false
            },
            error: function () {
                layer.msg('出现错误',{icon:2})
            }
        });
        if(!msg){
            $.ajax({
                url: 'xp/spec/updateSingle',
                data: {'name': result,'id': id},
                dataType: 'json',
                type: "post",
                async: false,
                success: function (data) {
                    if(data.code==200){
                        layer.closeAll('iframe');
                        parent.reload('multi');
                        //layer.msg("修改成功",{icon:1});
                    }else if(data.code == 500){
                        layer.msg("修改失败",{icon:2});
                    }
                },
                complete: function () {
                    layer.msg("修改成功",{icon:1});
                    return false;
                },
                error: function () {
                    layer.msg("新增出错，请稍后再试",{icon:7});
                    return false;
                }
            });
        }
    }
</script>
</html>